<template>
  <div>
    <el-button type="primary" @click="add()">新增</el-button>
    <el-table :data="transferList" style="width: 100%" :default-sort = "{prop: 'transferDate', order: 'descending'}">
      <el-table-column label="编号" prop="transferId" style="width: 100%">
        <!-- 插槽  和迭代变量一个意思 -->
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.transferId }}</span>
        </template>
      </el-table-column>

      <el-table-column label=" 员工编号" prop="empId" sortable style="width: 100%">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.empId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="原部门" style="width: 100%">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.oldDepartment }}</span>
        </template>
      </el-table-column>

      <el-table-column label="原职务" style="width: 100%">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.oldJob }}</span>
        </template>
      </el-table-column>

      <el-table-column label="新部门" style="width: 100%">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.newDepartment }}</span>
        </template>
      </el-table-column>
      <el-table-column label="新职务"  style="width: 100%">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.newJob }}</span>
        </template>
      </el-table-column>

      <el-table-column label="调动时间" prop="transferDate" sortable style="width: 100%">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.transferDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="调用原因" style="width: 100%">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.transferReason }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="update(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="delInfo(scope.row)">删除</el-button>
          <!--          <el-button size="mini" type="danger">详情</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <!--page-size  默认每页显示条数-->
      <el-pagination @size-change="selectPage" @current-change="handleCurrentChange" :current-page="curPage"
        :page-sizes="[1, 3, 5, 10]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
      <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="keyWord">
      </el-input>
      <el-button type="primary" icon="el-icon-search" @click="this.loaddata">搜索</el-button>
    </div>
    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="isShow" width="30%">
      <el-form ref="form" label-width="80px">
        <br>
        <el-form-item label="员工编号">
          <el-col :span="22">
            <input type="hidden" v-model="transferForm.empId" />
            <el-input placeholder="请输入员工编号" v-model="transferForm.empId"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="原部门">
          <el-col :span="22">
            <el-input placeholder="请输入原部门" v-model="transferForm.oldDepartment"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label=" 原职务">
          <el-col :span="22">
            <el-input placeholder="请输入原职务" v-model="transferForm.oldJob"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="新部门">
          <el-col :span="22">
            <el-input placeholder="请输入新部门" v-model="transferForm.newDepartment"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="新职务">
          <el-col :span="22">
            <el-input placeholder="请输入新职务" v-model="transferForm.newJob"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="调用时间">
          <el-date-picker v-model="transferForm.transferDate" type="datetime" format="yyyy-MM-dd " value-format="yyyy-MM-dd "
            placeholder="">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="调动原因">
          <el-col :span="22">
            <el-input placeholder="请输入调动原因" v-model="transferForm.transferReason"></el-input>
          </el-col>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "transferList",
    data() {
      return {
        transferList: [],
        title: "新增",
        transferForm: {
          transferId: null,
          empId: null,
          oldDepartment: "",
          oldJob: "",
          newDepartment: "",
          newJob: "",
          transferDate: "",
          transferReason: ""
        },
        total: 0, //总条数
        totalPage: 0, //总页数
        curPage: 1,
        rows: 5,
        keyWord: "",
        isShow: false
      }
    },
    methods: {
      loaddata() { //加载数据
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/transfer/list",
          type: "get",
          data: {
            "page": mythis.curPage,
            "row": mythis.rows,
            "keyWord": mythis.keyWord
          },
          dataType: "json",
          success: function(data) {
            console.log(data)
            mythis.transferList = data.info;
            mythis.total = data.total;
            mythis.totalPage = data.totalPage
          }
        })
      },
      add() { //打开新增模态框
        //显示模态框
        // $("#myModal").modal("show");
        //更改模态框的标题
        this.isShow = true;
        this.title = "新增";
        this.transferForm.transferId= null,
        this.transferForm.empId= null,
        this.transferForm.oldDepartment= "",
        this.transferForm.oldJob= "",
        this.transferForm.newDepartment= "",
        this.transferForm.newJob= "",
        this.transferForm.transferDate= "",
        this.transferForm.transferReason= ""
      },
      update(x) { //打开修改模态框
        //显示模态框
        this.isShow = true;
        //更改模态框的标题
        this.title = "修改";
        console.log(x)
        //把选中的值赋值给模态框的表单匀速
        this.transferForm.transferId= x.transferId,
        this.transferForm.empId= x.empId,
        this.transferForm.oldDepartment= x.oldDepartment,
        this.transferForm.oldJob= x.oldJob,
        this.transferForm.newDepartment= x.newDepartment,
        this.transferForm.newJob= x.newJob,
        this.transferForm.transferDate= x.transferDate,
        this.transferForm.transferReason= x.transferReason

      },
      saveInfo() { //保存
        var url = ""
        if (this.title == "修改") {
          url = "http://localhost:8080/transfer/update"
        } else {
          url = "http://localhost:8080/transfer/add"
        }

        var mythis = this;
        $.ajax({
          url: url,
          type: "get",
          data: mythis.transferForm,
          dataType: "json",
          success: function(data) {
            console.log(data)
            alert(data.info);
            if (data.info == "保存成功") {
              //关闭模态框
              mythis.isShow = false;
              //刷新
              mythis.loaddata();
            }
          }
        })
      },
      delInfo(x) { //删除
        var is = confirm("你确定要删除数据吗?");
        if (is) {
          var mythis = this;
          $.ajax({
            url: "http://localhost:8080/transfer/del",
            type: "get",
            data: {
              "id": x.transferId
            },
            dataType: "json",
            success: function(data) {
              console.log(data)
              alert(data.info);
              if (data.info == "删除成功") {
                //刷新
                mythis.loaddata();
              }
            }
          })
        }
      },
      selectPage(v) {
        this.rows = v;
        this.loaddata();
      },
      handleCurrentChange(v) { //当前页触发事件
        this.curPage = v;
        this.loaddata();
      }
    },
    mounted() {
      this.loaddata();
      // console.log(this.$route.query.info)
    }
  }
</script>
<style>
</style>
